<script setup>
import {ref} from "vue";
import * as echarts from "echarts";
import mCard from "@/components/mCard/index.vue";
import EChartsComponent from "@/views/largeScreen/EChartsComponent.vue";

let data1 = [100, 400];
let data2 = [10, 40];
let nameTextStyle = {
  color: "#D3F8F2",
  fontSize: 8,
};
const option = ref({
  grid: {
    left: "12%",
    top: "25%",
    width: "76%",
    height: "55%",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
      shadowStyle: {opacity: 0},
    },
    backgroundColor: "rgba(0,0,0,1)",
    borderWidth: 1,
    borderColor: "#999999",
    textStyle: {
      color: "#ffffff",
      fontSize: 10,
    },
  },
  xAxis: [
    {
      type: "category",
      interval: 0,
      axisLine: {
        show: false,
        lineStyle: {
          color: "#435459",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: "#ffffff",
        fontSize: 10,
        interval: 0,
        padding: [0, 0, 0, 0],
      },
      data: ["昨日", "今日"],
    },
    {
      axisLine: {
        show: false,
        lineStyle: {
          color: "rgba(0,0,0,0)",
        },
      },
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "元",
      nameTextStyle,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: [2, 2],
          dashOffset: 5,
          color: ["rgba(255, 255, 255, 1)"],
          opacity: 1,
          width: 0.3,
        },
      },
      alignTicks: true,
      axisLabel: {
        color: "#8B9EA4",
        fontSize: 9,
      },
    },
    {
      type: "value",
      name: "次",
      nameTextStyle,
      splitLine: {
        show: true,
        lineStyle: {
          type: [2, 2],
          dashOffset: 5,
          color: ["rgba(255, 255, 255, 1)"],
          opacity: 1,
          width: 0.3,
        },
      },
      alignTicks: true,
      axisLabel: {
        color: "#8B9EA4",
        fontSize: 9,
      },
    },
  ],
  series: [
    {
      name: "交易金额",
      data: data1,
      type: "bar",
      barWidth: 4,
      label: {
        show: false,
      },
      itemStyle: {
        borderRadius: 0,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {offset: 0, color: "#79EBCF"},
          {offset: 1, color: "#0B6360"},
        ]),
      },
    },
    {
      name: "充电次数",
      data: data2,
      type: "bar",
      barWidth: 4,
      barGap: 2,
      yAxisIndex: 1,
      label: {
        show: false,
      },
      itemStyle: {
        borderRadius: 0,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {offset: 0, color: "#40AEFE"},
          {offset: 1, color: "#25567A"},
        ]),
      },
    },
  ],
});
</script>

<template>
  <div class="left-card">
    <m-card title="环比交易信息" :height="300">
      <EChartsComponent ref="vChart" :option="option"/>
    </m-card>
  </div>
</template>
<style lang="scss" scoped></style>
